<template>
  <div class="ball">
    <ball-header absolute :leftArrow="false" :border="false" z-index="5" backColor="transparent">
      <div class="back acea-row row-around row-middle" slot="left">
        <!-- <van-icon name="wap-home-o" @click="$router.push(routerUrl)" size="17" /> -->
        <van-icon name="wap-home-o" @click="$router.go(-1)" size="17" />
        <div class="line"></div>
        <van-icon name="contact" @click="$router.push(routerUrl+'/user')" size="17" />
      </div>
      <!-- <div @click="$router.push(routerUrl+'/')" slot="left"><van-icon name="arrow-left" size="24" color="#ffffff" /></div> -->
    </ball-header>
    <router-link :to="routerUrl+'/groundinfo/'+storeData.id" class="banner pic">
      <img v-show="storeData.pic" :src="storeData.pic" alt="">
      <div class="text acea-row row-middle">
        <img v-if="storeData.club_info.logo" :src="config.baseUrl_xbq+storeData.club_info.logo" alt="">
        {{storeData.club_info.name}}
      </div>
    </router-link>
    <!-- <div class="titlea">
      <div class="item acea-row row-middle"><van-icon size="18" name="phone-o" /><span class="text">{{storeData.club_info.phone}}</span></div>
      <div class="item acea-row row-middle"><van-icon size="18" name="location-o" /><span class="text">{{storeData.club_info.address}}</span></div>
    </div> -->
    <div class="titlea acea-row row-middle row-between">
      <router-link :to="routerUrl+'/groundinfo/'+storeData.id" class="item acea-row row-column row-middle">
        <div class="pic"><img :src="banner_club_01" alt=""></div>
        <span>介绍</span>
      </router-link>
      <router-link :to="routerUrl+'/qiudong/'+storeData.club_info.id" class="item acea-row row-column row-middle">
        <div class="pic"><img :src="banner_club_02" alt=""></div>
        <span>18洞</span>
      </router-link>
      <router-link :to="routerUrl+'/card/'+storeData.club_info.id" class="item acea-row row-column row-middle">
        <div class="pic"><img :src="banner_club_03" alt=""></div>
        <span>会籍</span>
      </router-link>
      <router-link :to="'/m/imgList/'+storeData.club_info.id+'/1'" class="item acea-row row-column row-middle">
        <div class="pic"><img :src="banner_club_04" alt=""></div>
        <span>相册</span>
      </router-link>
    </div>
    <router-link :to="routerUrl+'/yudingDate'">
      <div class="part01 acea-row row-middle row-between">
        <span class="text">开球时间</span>
        <span class="text">{{courseDate.title}}</span>
        <span class="text">{{courseTime.title}}</span>
        <!-- <van-dropdown-menu class="dropdownMenu">
          <van-dropdown-item v-model="date_val" :title="date_title!=''?date_title:'选择日期'" class="dropdownItem" ref="dropdownDate" >
            <van-datetime-picker
              type="month-day"
              v-model="date_val"
              title="选择日期"
              :min-date="minDate"
              :max-date="maxDate"
              @cancel="closeDate"
              :show-toolbar="false" 
            />
          </van-dropdown-item>
          <van-dropdown-item v-model="time_val" :title="time_val!=''?time_val:'选择时间'" class="dropdownItem" ref="dropdownTime" @open="timeOpen" >
            <van-datetime-picker
              type="time"
              v-model="time_val"
              title="选择时间"
              :min-hour="0"
              :max-hour="23"
              @cancel="closeTime"
              :show-toolbar="false" 
            />
          </van-dropdown-item>
        </van-dropdown-menu> -->
      </div>
    </router-link>
    <div class="part02">
      <!-- <van-row>
        <van-col span="12" class="text">联盟嘉宾</van-col>
        <van-col span="12" class="text text_red">￥{{yudingList.alliance_price}}</van-col>
      </van-row> -->
      <van-row>
        <van-col span="3" class="text">嘉宾</van-col>
        <van-col span="12" class="text text_red">￥{{yudingList.guest_price}}</van-col>
      </van-row>
      <!-- <span class="msg">*会员行权时需向前台出示会员卡</span> -->
      <span style="height"></span>
      <router-link :to="routerUrl+'/dingchang'" v-if="yudingList.yudingStatus == 1" class="yd acea-row row-column row-middle row-between">
        <span class="title">预定</span>
        <!-- <div class="day">{{courseDate.e=='6'||courseDate.e=='7'?'周末':'平日'}}</div> -->
        <div class="day">{{yudingList.current_weekday==0?'节假日':'平日'}}</div>
      </router-link>
      <div v-else class="disableYd acea-row row-column row-middle row-between">
        <span class="title">今日停场</span>
        <!-- <div class="day">{{courseDate.e=='6'||courseDate.e=='7'?'周末':'平日'}}</div> -->
        <div class="day">{{yudingList.current_weekday==0?'节假日':'平日'}}</div>
      </div>
    </div>
    <div class="part03">
      <van-row class="row" v-if="yudingList.yudingStatus == 0">
        <van-col span="4" class="texterr">暂停订场</van-col>
        <van-col span="20" class="texterr acea-row row-column">
          <div class="stopTime">{{storeData.stoptime}}</div>
          <div class="reason">{{storeData.reason}}</div>
        </van-col>
      </van-row>
      <van-row class="row">
        <van-col span="4" class="text">价格包含</van-col>
        <van-col span="20" class="text">{{yudingList.pricecontain}}</van-col>
      </van-row>
      <van-row class="row">
        <van-col span="4" class="text">预订说明</van-col>
        <van-col span="20" class="text">{{yudingList.subscribeinfo}}</van-col>
      </van-row>
      <van-row class="row">
        <van-col span="4" class="text">退订说明</van-col>
        <van-col span="20" class="text">{{yudingList.unsubscribeinfo}}</van-col>
      </van-row>
    </div>
    <div class="part04 wapper acea-row row-column">
      <div class="title acea-row row-middle">
        <van-icon name="flag-o" size="18" />
        <span class="text">套餐</span>
        <span class="text2" @click="$router.push(routerUrl+'/mealList')">更多</span>
      </div>
      <router-link :to="routerUrl+'/meal/'+item.id" class="item acea-row row-middle" v-for="(item,index) in mealList" :key="index">
        <div class="pic"><img :src="item.pic" alt=""></div>
        <div class="content acea-row row-column">
          <span class="text">{{item.title}}</span>
          <div class="text2 acea-row row-bottom"><p>￥{{userInfo?(userInfo.member.isvip==1?item.alliance_price:item.guest_price):item.guest_price}}/</p><p>人起</p></div>
          <div class="btn">预订</div>
        </div>
      </router-link>
    </div>
    <div class="part05 wapper acea-row row-column">
      <div class="title acea-row row-middle">
        <van-icon name="photo-o" size="17" />
        <span class="text">图集</span>
      </div>
      <div class="grid acea-row row-middle row-between">
        <!-- <div class="item acea-row row-column" v-for="(item,index) in coursePic.coursePicList" :key="index">
          <div class="item_title">{{item.title}}</div>
          <div class="item_pic acea-row row-middle row-between" >
            <div class="pic" v-for="(item2,index2) in item.pics" :key="index2" @click="showImg(index*3+1+index2)"><img :src="item2.pic" alt=""></div>
          </div>
        </div> -->
        <router-link :to="'/m/imgList/'+storeData.club_info.id+'/1'" class="item2 acea-row row-middle row-center" :style="'background-image: url('+imgType01+');'">
          球道图集
        </router-link>
        <router-link :to="'/m/imgList/'+storeData.club_info.id+'/2'" class="item2 acea-row row-middle row-center" :style="'background-image: url('+imgType02+');'">
          会所图集
        </router-link>
      </div>
    </div>
    <van-image-preview v-model="show" :startPosition="index-1" showIndex closeable :images="coursePic.coursePicTotal" @change="imgHandle">
      <template v-slot:index>第{{ showIdx }}页</template>
    </van-image-preview>
    <div id="BMap"></div>
  </div>
</template>

<script>
import ballHeader from 'components/header'
import moment from 'moment'
import api from 'api'
import config from 'api/config.js'
import banner_club_01 from 'static/images/club_aboutus.png'
import banner_club_02 from 'static/images/club_hole.png'
import banner_club_03 from 'static/images/club_photos.png'
import banner_club_04 from 'static/images/club_vipcard.png'
import imgType01 from 'static/images/img_type01.png'
import imgType02 from 'static/images/img_type02.png'
import { Dialog } from 'vant'


moment.locale('zh-cn');

export default {
  components:{
    ballHeader,
  },
  data() {
    return {
      routerUrl:config.routerUrl,
      config,
      courseData:{},
      club_info:{},
      coursePicList:[],
      coursePicTotal:[],
      courseid:'',
      // mealList:[], // 套餐列表
      dateXinqi:moment(new Date().valueOf()).format("E"),
      myAddress:{},

      banner_club_01,
      banner_club_02,
      banner_club_03,
      banner_club_04,
      imgType01,
      imgType02,

      date_title:'',
      date_val:new Date(),
      time_val:'',
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      
      show:false,
      showIdx:1,
      index:1
    }
  },
  activated() {
    let courseid = this.$route.params.courseid
    // console.log("index-activated",courseid,sessionStorage.getItem("courseid"))
    if(courseid != sessionStorage.getItem("courseid") || sessionStorage.getItem("courseid") == null || !this.storeData.id){
      this.init(courseid)
    }
  },
  created() {
    
  },
  methods: {
    init(courseid){
      // console.log("index-init")
      const that = this
      this.$store.dispatch("common/getStoreData",courseid).then(()=>{
        that.getFirstYudingData()
      })
      this.$store.commit("user/save_userInfo")
    },
    getFirstYudingData(){
      // let date = parseInt(moment(new Date()).startOf('day').add(1,'days').format('X').valueOf()) + parseInt(Number(this.limitTime.starttime))*3600
      let date = Number(moment(new Date()).startOf('day').add(1,'days').format('x').valueOf())
      let time = this.$store.state.yuding.limitTime.starttime

      let m = moment(date).format("MMM")
      let d = moment(date).format("DD")
      let xinqi = moment(date).format("dddd")
      let e = moment(date).format("E")
      let title = m+d+" "+xinqi
      let o = {}
      o.date = {
        date:Math.floor(date/1000),
        e,
        title
      }
      o.time = {
        time,
        title:time+'点'
      }
      sessionStorage.setItem("yuding_teetime",JSON.stringify(o))
      this.$store.commit('yuding/setData',o)
    },
    chooseDate(){
      let val = this.date_val
      let m = moment(val).format("MMM")
      let d = moment(val).format("DD")
      let xinqi = moment(val).format("dddd")
      this.date_title = m+d+" "+xinqi
      // this.$refs.dropdownDate.toggle()
    },
    showImg(idx){
      this.show = true
      this.index = idx
      this.showIdx = idx
    },
    imgHandle(idx){
      this.showIdx = idx + 1
    },
    closeDate(){
      this.$refs.dropdownDate.toggle()
    },
    timeOpen(){
      let H = moment().format("HH")
      let m = moment().format("mm")
      this.time_val = H+":"+m
      console.log()
    },
    closeTime(){
      this.$refs.dropdownTime.toggle()
    }
  },
  watch:{
    date_val(val){
      this.chooseDate()
    }
  },
  computed:{
    storeData(){
      return this.$store.state.common.storeData
    },
    mealList(){
      return this.$store.state.common.mealList
    },
    coursePic(){
      return this.$store.state.common.coursePic
    },
    courseDate(){
      return this.$store.state.yuding.courseDate
    },
    courseTime(){
      return this.$store.state.yuding.courseTime
    },
    yudingList(){
      return this.$store.state.yuding.list
    },
    userInfo(){
      return this.$store.state.user.userInfo
    }
  }
}
</script>

<style scoped>
  .ball{
    background-color: #f2f3f5;
    min-height: 100vh;
    /* padding-bottom: 120px; */
  }
  .ball .back{
    width: 140px;
    height: 54px;
    background: rgba(0,0,0,.25);
    border-radius: 26px;
    color: #fff;
  }
  .ball .back .line{
    width: 1px;
    height: 24px;
    background: hsla(0,0%,100%,.25);
  }
  .ball .banner{
    width: 100%;
    height: 360px;
    position: relative;
    display: block;
  }
  .ball .banner::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, rgba(255,255,255,0) 40%,  rgba(0,0,0,0.6) 100%)
  }
  .ball .banner .text{
    left: 35px;
    /* bottom: 20px; */
    bottom: 60px;
    position: absolute;
    z-index: 3;
    font-size: 30px;
    color: #ffffff;
    font-weight: 700;
  }
  .ball .banner .text img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 20px;
    border: 2px solid #fff;
    box-sizing: border-box;
  }
  /* .ball .titlea{
    background-color: #ffffff;
    padding: 20px 0 30px 30px;
  } */
  /* .ball .titlea .item:first-of-type {
    margin-bottom: 20px;
  }
  .ball .titlea .item .text{
    margin-left: 15px;
    font-size: 26px;
  } */
  .ball .titlea{
    box-sizing: border-box;
    width: 100%;
    background-color: #ffffff;
    padding: 25px 50px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin-top: -40px;
    z-index: 10;
    position: relative;
  }
  .ball .titlea .item .pic{
    width: 80px;
    height: 80px;
  }
  .ball .titlea .item span{
    font-size: 28px;
    margin-top: 20px;
    color: #5e5e5e;
  }
  .ball .part01{
    padding: 0 20px;
    margin-top: 20px;
    height: 80px;
    background-color: #d6eafe;
  }
  .ball .part01 .text{
    color: #2d8aea;
    font-weight: 700;
    font-size: 30px;
  }
  .ball .part01 .dropdownMenu{
    flex: 1;
    height: 100%;
  }
  .ball .part01 .dropdownMenu >>> .van-dropdown-menu__bar{
    background-color: transparent;
    height: 100%;
    box-shadow: none;
  }
  .ball .part01 .dropdownMenu >>> .van-dropdown-menu__title{
    color: #2d8aea;
  }
  .ball .part01 .dropdownMenu >>> .van-dropdown-menu__title::after{
    border-color: transparent transparent #2d8aea #2d8aea;
  }
  .part02{
    background-color: #ffffff;
    padding: 30px 20px;
    border-bottom: 1px solid #dddddd;
    position: relative;
  }
  .part02 .yd{
    width: 110px;
    height: 90px;
    box-sizing: border-box;
    position: absolute;
    top: 30px;
    right: 20px;
    padding: 6px;
    background-color: #ff6600;
    border-radius: 5px;
    font-size: 22px;
  }
  .part02 .yd .title{
    color: #ffffff;
    line-height: 35px;
  }
  .part02 .yd .day{
    text-align: center;
    color: #ff6600;
    width: 100%;
    height: 40px;
    line-height: 41px;
    background-color: #ffffff;
  }
  .part02 .disableYd{
    width: 110px;
    height: 90px;
    box-sizing: border-box;
    position: absolute;
    top: 30px;
    right: 20px;
    padding: 6px;
    background-color:#AAAAAA;
    border-radius: 5px;
    font-size: 22px;
  }
  .part02 .disableYd .title{
    color: #ffffff;
    line-height: 35px;
  }
  .part02 .disableYd .day{
    text-align: center;
    color:#AAAAAA;
    width: 100%;
    height: 40px;
    line-height: 41px;
    background-color: #ffffff;
  }
  .part02 .text{
    text-align: left;
    font-size: 30px;
    /* margin-bottom: 25px; */
    margin: 25px 0;
  }
  .part02 .text_red{
    color: #ff3300;
  }
  .part02 .msg{
    font-size: 24px;
    color: #ff6600;
    display: block;
    text-align: left;
  }
  .part03{
    background-color: #ffffff;
    padding: 30px 20px;
  }
  .part03 .row{
    text-align: left;
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 35px;
  }
  .part03 .row .texterr{
    color: #FF0000;
  }
  .part03 .row .texterr .reason{
    margin-top: 10px;
  }
  .part03 .row:last-of-type{
    margin-bottom:0px
  }
  .part04{
    margin-top: 20px;
    padding: 0 20px;
    background-color: #ffffff;
  }
  .wapper .title{
    border-bottom: 1px solid #dddddd;
    font-size: 30px;
    padding: 20px 0;
  }
  .wapper .title .text{
    margin-left: 5px;
    font-size: 28px;
  }
  .wapper .title .text2{
    flex: 1;
    text-align: right;
    color: #888888;
    font-size: 26px;
  }
  .part04 .item{
    padding: 20px 0;
    border-bottom: 1px solid #dddddd;
  }
  .part04 .item .pic{
    width: 200px;
    height: 150px;
  }
  .part04 .item .content{
    flex: 1;
    margin-left: 20px;
  }
  .part04 .item .content .text{
    font-size: 28px;
    color: #000000;
  }
  .part04 .item .content .text2{
    color: #ff6600;
    margin-top: 15px;
  }
  .part04 .item .content .text2 p:first-of-type{
    font-size: 30px;
  }
  .part04 .item .content .text2 p:nth-child(2){
    font-size: 20px;
    /* margin: 0 0 5px 0; */
  }
  .part04 .item .content .btn{
    width: 120px;
    height: 50px;
    line-height: 50px;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    background-color: #ff6600;
    border-radius: 25px;
    margin-top: 30px;
  }
  .part05{
    margin-top: 20px;
    padding: 0 20px;
    background-color: #ffffff;
  }
  .part05 .grid{
    padding: 60px 20px;
  }
  .part05 .grid .item2{
    width: 300px;
    height: 300px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 30px;
  }
  /* .part05 .grid{
    margin-top: 20px;
  } */
  .part05 .grid >>> .item{
    /* width: 223px;
    height: 223px; */
    /* display: inline-block; */
    margin-bottom: 35px;
  }
  .part05 .grid >>> .item .item_title{
    font-size: 26px;
    margin-bottom: 10px;
  }
  .part05 .grid >>> .item .item_pic{

  }
  /* .part05 .grid >>> .item:nth-child(3n){
    padding: 0 0 20px 0;
  }
  .part05 .grid >>> .item:nth-child(3n + 1){
    padding: 0 20px 20px 0;
  }
  .part05 .grid >>> .item:nth-child(3n + 2){
    padding: 0 20px 20px 0;
  } */
  .part05 .grid >>> .pic{
    width: 223px;
    height: 223px;
  }
</style>